<template>
    <div class="news">
      <div class="wrap clearfix">
        <Row class="module-title">
          <i-col span="24">
            <h3>微站优势</h3>
          </i-col>
        </Row>

        <Row type="flex" justify="space-between" class="code-row-bg content g-mt50 g-mb80">
          <i-col class="item" :md="7" :sm="7" :xs="24">
            <div class="head">
              <img src="./news.jpg" width="900" alt="..." />
              <div class="text-wrap">
                <h4 class="title">蜻蜓动态</h4>
                <p class="text">了解蜻蜓科技最新动态</p>
              </div>
            </div>
            <div class="body">
              <ul class="list clearfix">
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018 -03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
              </ul>
            </div>
          </i-col>

          <i-col class="item" :md="7" :sm="7" :xs="24">
            <div class="head">
              <img src="./product_case.jpg" width="900" alt="..." />
              <div class="text-wrap">
                <h4 class="title">蜻蜓案例</h4>
                <p class="text">了解蜻蜓科技最新案例</p>
              </div>
            </div>
            <div class="body">
              <ul class="list clearfix">
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018 -03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
              </ul>
            </div>
          </i-col>

          <i-col class="item" :md="7" :sm="7" :xs="24">
            <div class="head">
              <img src="./AI.jpg" width="900" alt="..." />
              <div class="text-wrap">
                <h4 class="title">人工智能</h4>
                <p class="text">超越想象，引领未来</p>
              </div>
            </div>
            <div class="body">
              <ul class="list clearfix">
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018 -03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
                <li><a href="#" class="link">最新动态！！最新动态！！最新动态！！</a><span class="date">2018-03-25</span></li>
              </ul>
            </div>
          </i-col>
        </Row>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .news
    padding-top: 60px
    .content
      .item
        .head
          position: relative
          font-size: 0
          img
            width: 100%
          .text-wrap
            ltposition(0, 38px)
            padding-left: 32px
            h4.title
              sc($font-medium, $white)
              font-weight: bold
            p.text
              margin-top: 5px
              sc($font-small-x, #eee)
        .body
          ul.list
            margin-top: 15px
            li
              position: relative
              width: 100%
              hh(30px)
              font-size: 0
            .link
              display: block
              margin-right:80px
              sc($font-small-x, $back)
              no-wrap()
              &:hover
                color: $main-color
                text-decoration: underline
            .date
              rtposition(0, 0)
              width: 80px
              text-align: right
              sc($font-small, #aaa)
</style>
